<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body,html{
        width: 100%;
        height: 100%;
        background-color:rgb(240, 187, 240);
        overflow: hidden;
    }
    div{
        width: 1400px;
        height: 800px;
        background-image: url('./image/guimie.jfif');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .textstyle{
        width: 300px;
        height: 30px;
        position: relative;
        top: 100px;
        border-radius: 10px;
        margin: 10px 0;
    }
    .passwordstyle{
        width: 300px;
        height: 30px;
        margin: 10px 0;
        position: relative;
        top: 100px;
        border-radius: 10px;
    }
    .buttonstyle{
        width: 300px;
        height: 30px;
        background-color: thistle;
        position: relative;
        top: 100px;
        margin: 10px 0;
        font-weight: bold;
        border-radius: 10px;
    }
    label{
        position: relative;
        top:100px;
        font-weight: bold;
    }
</style>
<body>
    <div>
    <form>
        <label for="username">用户名</label>
        <br>
        <input type="text" placeholder="请输入用户名" id="username" class="textstyle">
        <br>
        <label for="password">密码</label>
        <br>
        <input type="password" placeholder="请输入密码" id="password" class="passwordstyle">
        <br>
        <button class="buttonstyle">登录</button>
    </form>
    </div>
    
    <script>
        $('.buttonstyle').click(function(){
            //1.获取输入框的值
            // var username = $('#username').val()
            // var password = $('#password').val()
            var username = 'admin1'
            var password = '123321'
            //2.请求登录接口

            $.ajax({
                url:'http://59.110.172.231:7788/user/login',
                method:"POST",
                data:JSON.stringify({
                    username:'admin1',
                    password:'123321'
                }),
                contentType:'application/json',
                success:function(res){
                    if(res.status == 500){
                        alert(res.message)
                    }else{
                        $.ajaxSetup({
                        headers:{
                            'Authorization':res.data.token
                        }
                    })
                    
                    localStorage.setItem('token',res.data.token)
                    //根据token获取用户信息
                    $.get('http://59.110.172.231:7788/user/info',
                    {token:res.data.token}),
                    function(res){
                        //将用户信息存储到浏览器
                        localStorage.setItem('userInfo',JSON.stringify(res.data))
                    }
                    setTimeout(function(){
                        location.href = 'http://59.110.172.231/project/Consult/index.html'
                    },1000)
                }
                    }
                   
            })
            // 阻止默认行为
            return false
        })  
    </script>
</body>
</html>